<!--
 * @Author       : xinbaiyu
 * @Version      : V1.0
 * @Date         : 2025-03-03 17:28:02
 * @Description  : content-script的主页面
-->
<template>
  <div
    id="wxt-smt-search"
    :style="
      isDragging
        ? {}
        : {
            width: 0,
            height: 0,
          }
    "
    @mousemove="onDrag"
    @mouseup="stopDrag"
  >
    <p
      :style="{
        position: 'fixed',
        top: `${position?.top || 0}px`,
        left: `${position?.left || 0}px`,
        color: 'white',
        zIndex: 9999,
        cursor: 'pointer',
      }"
      v-show="showTip"
    >
      <img
        class="tip-img"
        src="@/assets/ai.jpg"
        alt=""
        srcset=""
        @click="showSession"
      />
    </p>
    <img
      id="ai-bot"
      src="@/assets/aibot.png"
      alt=""
      ref="aiBot"
      @mousedown="startDrag"
      @click="controlShowSession"
    />
    <Session
      ref="SessionBox"
      :aiBot="aiBot"
      :showAnswerDialog="showAnswerDialog"
      @closeSession="showAnswerDialog = false"
    ></Session>
  </div>
</template>

<script lang="ts" setup>
import "./css/element.less";
import Session from "./Session.vue";
import { useTextSelection, useDebounceFn } from "@vueuse/core";
import { ref, reactive, watch } from "vue";

const state = reactive(useTextSelection());
let position = reactive({ top: 0, left: 0 });
const showTip = ref(false);
const showAnswerDialog = ref(false);
const SessionBox = ref();
const dragStartTime = ref<Date>();

const updatePosition = useDebounceFn((rects) => {
  console.log(rects[0]);
  if (rects.length > 0 && rects[0].width >= 1) {
    let top = rects[0].top - 5; // 调整位置
    let left = rects[0].left + rects[0].width + 5; // 调整位置

    // 获取视口宽度和高度
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    // 获取提示框的宽度和高度
    const tipWidth = 20; // 根据实际情况调整
    const tipHeight = 20; // 根据实际情况调整

    // 检查是否超出视口边界并进行调整
    if (left + tipWidth > viewportWidth) {
      left = viewportWidth - tipWidth - 20; // 调整位置，使其在视口内
    }
    if (top + tipHeight > viewportHeight) {
      top = viewportHeight - tipHeight - 20; // 调整位置，使其在视口内
    }
    if (top < 0) {
      top = 0; // 调整位置，使其在视口内
    }

    position.top = top;
    position.left = left;
    showTip.value = true;
    // console.log(position.top);
    // console.log(position.left);
  } else {
    showTip.value = false;
  }
}, 300); // 300ms 的防抖时间

watch(() => state.rects, updatePosition);

const isDragging = ref(false);
const initialX = ref(0);
const initialY = ref(0);
const aiBot = ref<HTMLElement>();

const startDrag = (event: MouseEvent) => {
  console.log("开始拖拽");
  dragStartTime.value = new Date();
  isDragging.value = true;
  initialX.value = event.clientX - aiBot.value!.offsetLeft;
  initialY.value = event.clientY - aiBot.value!.offsetTop;
};

const onDrag = (event: MouseEvent) => {
  if (isDragging.value) {
    console.log("正在拖拽");
    const x = event.clientX - initialX.value;
    const y = event.clientY - initialY.value;
    aiBot.value!.style.left = `${x}px`;
    aiBot.value!.style.top = `${y}px`;
  }
};
const stopDrag = () => {
  console.log("取消拖拽");
  isDragging.value = false;
};
const showSession = async () => {
  showAnswerDialog.value = true;
  showTip.value = false;
  SessionBox.value.question = state.text; // 给子组件的input框赋值
};

const controlShowSession = () => {
  let endTime = new Date();
  console.log("点击了");
  const rangeTime = Number(endTime) - Number(dragStartTime!.value);
  console.log("持续时间", rangeTime);

  if (rangeTime > 190) return;
  showAnswerDialog.value = !showAnswerDialog.value;
};
</script>

<style scoped lang="less"></style>
